
<style lang="less" scoped>
// 占位div样式
.left-div {
  visibility: hidden;
  border-style: solid;
  border-color: black;
  /* border-right-color: red; */
  border-color: transparent;
}

// 一级标题
.first-title {
  font-size: 16px;
  font-family: "PingFang SC";
  font-weight: bold;
  color: #464c5b;
}

.count-style {
  font-size: 50px;
}

body {
  overflow: scroll;
}
</style>

<template>
  <div style="padding-top: 0px;">
    <!-- 图标统计 -->
    <div>
      <Row :gutter="20">
        <i-col
          :xs="12"
          :md="12"
          :lg="6"
          v-for="(infor, i) in inforCardData"
          :key="`infor-${i}`"
          style="height: 120px;padding-bottom: 10px;"
        >
          <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
            <count-to :end="infor.count" style="font-size: 50px;" count-class="count-style"/>
            <p>{{ infor.title }}</p>
          </infor-card>
        </i-col>
      </Row>
    </div>
    <Card>
      <Row style="margin-top: 20px;overflow: -webkit-paged-y;">
        <!-- <Col span="2" class="left-div"></Col> -->
        <Col span="24">
          <div>
            <!-- 我的相关 -->
            <div>
              <Tabs type="card">
                <TabPane label="我的提问">
                  <page-my-request></page-my-request>
                </TabPane>
                <TabPane label="我的回答">
                  <page-my-answer></page-my-answer>
                </TabPane>
                <TabPane label="我的收藏">
                  <page-my-collect></page-my-collect>
                </TabPane>
                <TabPane label="我的举报">
                  <page-report></page-report>
                </TabPane>
              </Tabs>
            </div>
          </div>
        </Col>
        <!-- <Col span="2"></Col> -->
      </Row>
    </Card>
  </div>
</template>
<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'

import PageMyRequest from './PageMyRequest'
import PageReport from './PageReport.vue'
import PageMyAnswer from './PageMyAnswer.vue'
import PageMyCollect from './PageMyCollect.vue'

export default {
  name: 'UserCenter',
  components: {
    CountTo,
    InforCard,
    PageMyRequest,
    PageReport,
    PageMyAnswer,
    PageMyCollect
  },
  data () {
    return {
      // 个人信息
      inforCardData: [
        {
          title: '我的提问',
          icon: 'md-help-circle',
          count: 0,
          color: '#2d8cf0'
        },
        {
          title: '我的回答',
          icon: 'ios-photos-outline',
          count: 0,
          color: '#19be6b'
        },
        {
          title: '我的收藏',
          icon: 'ios-list-box-outline',
          count: 0,
          color: '#E46CBB'
        },
        { title: '我的举报', icon: 'md-done-all', count: 0, color: '#9A66E4' }
      ]
    }
  },
  methods: {
    // 提交回答信息
    handleSubmit (name) {
      // 回答信息封装
      this.answerForm.requestId = this.requestId
      this.answerForm.pid = -1
      this.answerForm.type = 1
      this.$httpUtil.asyncPost(
        'request_answer/answer/save',
        this.answerForm,
        res => {
          this.$Message.success(res.data.msg)
        }
      )
    },
    handleReset (name) {
      this.$refs[name].resetFields()
      this.answerForm = {}
      this.contentIsReset = true
      this.selectProCourseList = this.courseList
      setTimeout(() => {
        // 解决第二次重置，富文本框中内容不消失
        this.contentIsReset = false
      }, 500)
    },

    //= =============== 修改个人密码 end ==================

    // 获取当前用户 相关的统计信息
    getUserRelateCount () {
      this.$httpUtil.asyncPost(
        'web/user-main/queryUserRelateCount',
        {},
        res => {
          let data = res.data
          if (data.code === 200) {
            let countEntity = data.records
            this.setCountData(countEntity)
          } else {
            this.$Message.error(data.msg)
          }
        }
      )
    },
    setCountData (countEntity) {
      this.inforCardData[0].count = countEntity.requestCount
      this.inforCardData[1].count = countEntity.answerCount
      this.inforCardData[2].count = countEntity.collectCount
      this.inforCardData[3].count = countEntity.reportCount
    },

    // 界面初始化方法
    init () {
      this.getUserRelateCount()
    }
  },
  computed: {},
  mounted: function () {
    this.init()
  }
}
</script>
